<template>
  <div class="forgotAccount">
    <!-- <main class="forgotAccount-main"> -->
    <Row
      class="forgotAccount-main"
      type="flex"
      align="middle"
      justify="center"
    >
      <Row
        type="flex"
        align="middle"
        justify="center"
        style="width:100%;"
      >
        <img
          src="~@/assets/img/login/log.png"
          style="position: fixed;top: 0;left: 0;margin: 20px;cursor: pointer;"
        />
        <div class="main-right">
          <span
            style="font-size:16px;"
            @click.stop="$router.push({name:'login'})"
          >登录</span>
          <span style="margin:10px"> |</span>
          <span
            style="font-size:16px"
            @click.stop="$router.push({name:'registered'})"
          >注册</span>
        </div>
        <section class="forgotAccount-form">
          <h2 class="forgotAccount-title">
            找回密码
          </h2>
          <Form
            ref="pswForm"
            :model="formItem"
            :rules="rules"
            :label-width="140"
          >
            <Row class="form-class">
              <Col :span="24">
              <FormItem
                label="注册手机"
                prop="phoneNumber"
              >
                <Input
                  v-model="formItem.phoneNumber"
                  placeholder="请输入关联的手机号码"
                  maxlength="11"
                  clearable
                  style="width:300px"
                ></Input>
              </FormItem>
              </Col>
              <Col :span="24">
              <FormItem
                label="验证码"
                prop="validateCode"
              >
                <Input
                  v-model="formItem.validateCode"
                  maxlength="6"
                  placeholder="请输入验证码"
                  style="width:300px"
                >
                </Input>
                <section class="validateCode-getcode">
                  <section
                    class="validateCode-clicbutton"
                    v-show="!clickedFlag"
                    @click.stop="getCode"
                  >
                    获取验证码
                  </section>
                  <section
                    class="validateCode-count"
                    v-show="clickedFlag"
                  >
                    {{ countBackwards }}s后重发
                  </section>
                </section>
              </FormItem>
              </Col>
              <Col :span="24">
              <FormItem
                label="新密码"
                prop="password"
              >
                <Input
                  v-model="formItem.password"
                  maxlength="16"
                  placeholder="请输入密码"
                  type="password"
                  autocomplete="new-password"
                  clearable
                  style="width:300px"
                />
                <section class="password-strength">
                  <section ref="passwordStrengthFirstChild">弱</section>
                  <section ref="passwordStrengthSecondChild">中</section>
                  <section ref="passwordStrengthThirdChild">强</section>
                </section>
              </FormItem>
              </Col>
              <Col :span="24">
              <FormItem
                label="确认密码"
                prop="confirmPassword"
              >
                <Input
                  v-model="formItem.confirmPassword"
                  maxlength="16"
                  placeholder="请输入密码"
                  type="password"
                  autocomplete="new-password"
                  clearable
                  style="width:300px"
                />
              </FormItem>
              </Col>
              <Col
                :span="24"
                class="center"
              >
              <FormItem label="">
                <Button
                  type="primary"
                  @click="handleSave"
                  :loading="loading"
                  style="width:300px;height:40px"
                >确认修改</Button>
              </FormItem>

              </Col>
            </Row>
          </Form>
        </section>
      </Row>
      <Row style="position: fixed;bottom: 0;left: 0;margin: 20px;color:#fff;text-align:center; width:100%;">©2019 zhny.hn.sgcc.com.cn 国网湖南省电力有限公司版权所有 京ICP备：17072407</Row>
    </Row>
    </Row>
    <!-- </main> -->
  </div>
</template>

<script>
import { validatePhone } from "@/libs/commonApi/validate";
import { requiredText } from "@/libs/validator/message";
import CryptoJS from "crypto-js";
import{getForgotPWDCode,forgotpwd} from "@/api/account.js";
export default {
  props: {},
  data() {
    const validatePassword = (rule, val, callback) => {
      if (!val) {
        callback(new Error("请输入密码"));
        }else{
            var numasc = 0;
            var charasc = 0;
            var otherasc = 0;
            let hasNum=false;
            let hasChar=false;
            let hasSpecial=false;

          if (val.length < 8 || val.length > 16) {
            callback(new Error("要求8-16位字符"));
          }
          //判断数字
          for (var i = 0; i < val.length; i++) {
            var asciiNumber = val.substr(i, 1).charCodeAt();
            if (asciiNumber >= 48 && asciiNumber <= 57) {
              numasc += 1;
              hasNum=true;
            }
            //判断大小写字母
            if (
              (asciiNumber >= 65 && asciiNumber <= 90) ||
              (asciiNumber >= 97 && asciiNumber <= 122)
            ) {
              charasc += 1;
              hasChar=true;
            }
            //判断特殊字符
            if (
              (asciiNumber >= 33 && asciiNumber <= 47) ||
              (asciiNumber >= 58 && asciiNumber <= 64) ||
              (asciiNumber >= 91 && asciiNumber <= 96) ||
              (asciiNumber >= 123 && asciiNumber <= 126)
            ) {
              otherasc += 1;
              hasSpecial=true;
            }
          }
          if (0 == numasc) {
            callback(new Error("密码须包含数字"));
          } else if (0 == charasc) {
            callback(new Error("密码须包含字母"));
          } else if (0 == otherasc) {
            callback(new Error("密码须包含特殊字符"));
          } else {
            callback();
          }
            const passwordStrengthFirstChild = this.$refs.passwordStrengthFirstChild
            const passwordStrengthSecondChild = this.$refs.passwordStrengthSecondChild
            const passwordStrengthThirdChild = this.$refs.passwordStrengthThirdChild
            if(hasNum  || hasChar || hasSpecial){
              passwordStrengthFirstChild.style.backgroundColor = "#b0e3ff"
              passwordStrengthSecondChild.style.backgroundColor = "rgb(212, 212, 212)"
              passwordStrengthThirdChild.style.backgroundColor = "rgb(212, 212, 212)"
            }
            if(hasNum && hasChar || hasNum && hasSpecial || hasChar && hasSpecial){
              passwordStrengthFirstChild.style.backgroundColor = "rgb(212, 212, 212)"
              passwordStrengthSecondChild.style.backgroundColor = "#64c8ff"
              passwordStrengthThirdChild.style.backgroundColor = "rgb(212, 212, 212)"
            }
            if(hasNum && hasChar && hasSpecial){
              passwordStrengthFirstChild.style.backgroundColor = "rgb(212, 212, 212)"
              passwordStrengthSecondChild.style.backgroundColor = "rgb(212, 212, 212)"
              passwordStrengthThirdChild.style.backgroundColor = "#00a4ff"
            }
        }
    };
    const passwordCheck = (rule, value, callback) => {
      if(!value) return callback(new Error("请再次输入密码"))
      if(value !== this.formItem.password) return callback(new Error("两次输入的密码不相同"))
      callback()
    }
    return {
      loading: false,
      passwordPercent: 0,
      clickedFlag: false,
      countBackwards: 0,
      second:60,
      timer: null,
      rules: {
        phoneNumber: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        validateCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            validator: validatePassword,
            trigger: "blur"
          }
        ],
        confirmPassword: [
          {
            required: true,
            validator: passwordCheck,
            trigger: "blur"
          }
        ]
      },
      formItem: {},
      aesKey: CryptoJS.enc.Utf8.parse("c9d2eea8faea11e996ed14ecd17545c4"),
    };
  },
  computed: {},
  created() {},
  mounted() {},
  destroyed() {
    this.timer = null;
  },
  methods: {
    setPwd(pwd) {
      return CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(pwd), this.aesKey, {
        mode: CryptoJS.mode.ECB
      }).toString();
    },
    handleSave() {
      this.$refs.pswForm.validate(valid=>{
        if(valid) {
          this.loading = true;
          const newPWD = this.setPwd(this.formItem.password);
          const renewPWD = this.setPwd(this.formItem.confirmPassword);; // 这边为确认密码，只确认是否一致
          let phone = CryptoJS.AES.encrypt(
            CryptoJS.enc.Utf8.parse(this.formItem.phoneNumber),
            this.aesKey,
            {
              mode: CryptoJS.mode.ECB,
            }
          ).toString();
          let param={
            phone:phone,
            password:newPWD,
            repassword:renewPWD,
            code:this.formItem.validateCode,
          }
          forgotpwd(param).then(res=>{
            if(res.code === 200){
              this.loading=false;
              this.$Message.success(res.message);
              this.$cookie.remove("access_token");
              this.$store.navList = null; // 清除菜單緩存
              setTimeout(()=>{
                this.$router.push({
                name: "login"
              });
              },3000)
            }else{
              this.loading=false;
              this.$Message.error(res.message);
            }
          })
        }
      })
    },
    getCode() {
     if (!/^1[3456789]\d{9}$/.test(this.formItem.phoneNumber)) {
        this.$Message.error("手机号不可用");
        return;
      }

      let phone = CryptoJS.AES.encrypt(
        CryptoJS.enc.Utf8.parse(this.formItem.phoneNumber),
        this.aesKey,
        {
          mode: CryptoJS.mode.ECB,
        }
      ).toString();
      getForgotPWDCode({ phone: phone }).then((res) => {
        if (res.code == 200) {
          this.$Message.success("验证码已发送");
          this.clickedFlag = true;
          this.countBackwards=this.second;
          this.countTime();
        } else {
          this.$Message.error(res.message);
        }
      });


      if (!this.formItem.phoneNumber) {
        this.$refs.pswForm.validateField("phoneNumber");
        return false;
      }
      this.clickedFlag = true;
      this.countTime();
    },
    countTime() {
      this.timer=null;
      if (this.countBackwards > 0) {
        this.countBackwards--;
        this.timer=setTimeout(this.countTime, 1000);
      } else {
        this.clickedFlag = false;
      }
    }
  },
  components: {}
};
</script>

<style scoped lang="scss">
/deep/.ivu-input {
  height: 40px;
}
/deep/.ivu-form .ivu-form-item-label {
  font-size: 16px;
  color: #414141;
}
.forgotAccount {
  width: 100%;
  height: 100%;
  background-color: rgb(246, 247, 249);
}
.forgotAccount-main {
  background-image: url("~@/assets/img/login/forgotAccount-bg.jpg");
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .forgotAccount-title {
    // position: relative;
    // padding-top: 40px;
    // color: #42c2ff;
    // font-size: 16px;
    font-size: 18px;
    margin-top: -109px;
    margin-left: 20px;
    &::after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 2px;
      background-color: #42c2ff;
    }
  }
  .main-right {
    position: fixed;
    top: 25px;
    right: 80px;
    margin-right: 80px;
    cursor: pointer;
    color: #fff;
    span:hover {
      text-decoration: underline;
    }
  }
  .form-class {
    width: 390px;
    margin-left: 250px;
    margin-right: 350px;
    font-size: 14px;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .forgotAccount-form {
    border-radius: 7px;
    background-color: #fff;
    width: 1000px;
    // width: 50%;
    padding-top: 120px;
    margin: 0 auto;
  }
}
.password-strength {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  section {
    width: 30%;
    height: 20px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    background-color: rgb(212, 212, 212);
  }
}
.validateCode-getcode {
  position: absolute;
  top: 4px;
  right: 0;
  // padding-right: 10px;
  margin-right: -41px;
  padding-left: 20px;
  height: 32px;
  > .validateCode-clicbutton {
    color: #46a2f7;
    font-size: 16px;
    cursor: pointer;
    &::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 10px;
      height: 16px;
      width: 2px;
      background-color: #ddd;
    }
  }
  > .validateCode-count {
    color: rgb(136, 132, 132);
    &::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 10px;
      height: 16px;
      width: 2px;
      background-color: #ddd;
    }
  }
  // .login_body {
  // overflow: hidden;
  // margin-top: -2px;
  // height: 100%;
  // background-image: url("~@/assets/img/login/background.png");
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // -moz-background-size: 100% 100%;
  // }
}
</style>
